<template>
	<view class="container">
		<scroll-view class="scroll-container scrollleft" scroll-x scroll-with-animation v-if="brands.length > 1"
			:scroll-into-view="'s' + currentIndex">
			<view class="scrollbox">
				<view v-for="(item, index) in activeTopTemp"
					:class="['scroll-item',{ 'nav-list-active': index == currentId }]" :id="'s' + index" :key="index"
					@tap="handleScroll(index,item)">
					{{ item }}
					<!-- 底部红色短border -->
					<!-- <view class="bottom-border" v-if="index == currentId">
					</view> -->
				</view>
				<!-- 下划线 -->
				<view class="nav-line">
					<view class="nav-linenav"
						:style="{transform: 'translateX(' + translateX + 'px) translateX(-50%)',}"></view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			brands: { // 是否展示下划线动画
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				translateX: 0,
				currentId: '',
				/* 控制被选中 */
				currentIndex: '',
				// 避免直接修改props
				activeTopTemp: [],
				/* 控制位置 */
				// brands:[
				// 	'牛仔裤',
				// 	'羽绒服',
				// 	'皮鞋',
				// 	'运动鞋',
				// 	'跑步鞋',
				// 	'篮球鞋',
				// 	'围巾',
				// 	'西装',
				// 	'西裤'
				// ]
			};
		},
		computed: {
			pokerHistory() {
				console.log(this.brands)
				this.activeTopTemp = this.brands
				return this.brands
			}
		},
		watch: {
			pokerHistory(newV, oldV) {
				this.activeTopTemp = newV
				this.$forceUpdate()
				console.log('activeTopTemp', newV, oldV)
			},
		},
		onLoad() {

		},
		mounted() {
			this.setUnderLine();
		},
		methods: {
			handleScroll(index, item) {
				this.currentId = index;
				this.setUnderLine();
				this.currentIndex = Math.max(0, index - 1);
				this.$emit('tabtap', index)
			},
			/**
			 * 设置下划线
			 */
			setUnderLine() {
				// 屏幕宽
				let width
				uni.getSystemInfo({
					success(res) {
						width = res.screenWidth;
					}
				});
				// 每个菜单所占宽度 = 屏宽 / 菜单个数
				let slidingWidth = (width / this.brands.length).toFixed(2);
				// 半个菜单宽度 （为了将下划线与菜单对齐）
				let halfSlidingWidth = (slidingWidth / 2).toFixed(2);
				// 水平位移目的坐标 = 半个菜单宽度 + (菜单宽 x 当前所在的index)
				this.translateX = Number(halfSlidingWidth) + Number(slidingWidth * this.currentId);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.scrollDabox {
		float: left;
		width: 100%;
		background: #fff;
	}

	.scrollbox {
		display: flex;
	}

	.scroll-container {
		box-sizing: border-box;
		white-space: nowrap;
		height: 45px;
		background: white;

		// border-bottom: 1upx solid #ccc;
		.scroll-item {
			text-align: center;
			display: inline-block;
			line-height: 45px;
			font-size: 30rpx;
			color: #ffffff;
			background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			flex: 1;

			&.nav-list-active {
				font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
				font-weight: bold;
				color: #333333;
				transition: all 0.3s;
				font-weight: bold;
				color: #ffffff;
				transition: all 0.3s;
				background: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.bottom-border {
			margin: 0 auto;
			width: 50upx;
			height: 10upx;
			background: rgba(255, 79, 82, 1);
			border-radius: 5upx;
		}
	}

	.nav-line {
		margin: 0 auto;
	}

	.fixscrol {
		height: 45px;
	}

	.fixscrol .scrollleft {
		position: fixed;
		z-index: 5;
	}

	.scrollleft {
		position: relative;
	}

	.nav-line {
		position: absolute;
		left: 0;
		top: 40px;

		.nav-linenav {
			width: 20px;
			height: 4px;
			border-radius: 2px;
			transition-duration: 0.3s;
			top: -7px;
			background-color: #4158D0;
			background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
		}
	}
</style>
